<template>
  <el-form
    ref="userForm"
    :rules="rules"
    :model="userInfo"
    label-width="120px"
    style="margin-left: 120px; margin-top: 30px"
  >
    <el-form-item
      label="姓名:"
      prop="username"
    >
      <el-input
        v-model="userInfo.username"
        style="width:300px"
      />
    </el-form-item>
    <el-form-item
      label="密码:"
      prop="password"
    >
      <el-input
        v-model="userInfo.password"
        type="password"
        style="width:300px"
      />
    </el-form-item>
   
    <el-form-item>
      <el-button
        type="primary"
        @click="onSubmit(userForm)"
      >
        更新
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { getProfileById } from '@/api/user'
import { saveUserDetailById } from '@/api/employees'
import {  FormInstance, FormRules } from 'element-plus'
import router from '@/router'
//绑定from组件实例
const userForm = ref<FormInstance>()
//表单验证数
let userInfo=reactive<UserInfo>({
  username:'',
  password:'',
})
const rules = reactive<FormRules>({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
})
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if(!valid) return false
    updateUserDetailById()
    router.back()
  })
}
const route =useRoute()
const loadProfileById =async() => {
  try {
    const id =route.query.id as string
    const res = await getProfileById(id)
    console.log('getProfileById',res)
    userInfo =Object.assign(userInfo ,res.data,{ password :'' })
  } catch (error) {
    console.log(error)
  }
}
loadProfileById()
const updateUserDetailById =async() => {
  try {
    const res = await saveUserDetailById(userInfo)
    console.log('saveUserDetailById',res)
  } catch (error) {
    console.log(error)
  }
}
</script>